<template>
	<div>
		<el-card>
			<el-row>
				<!-- 搜索模块 -->
				<el-col :span="4"
					><el-input
						v-model="input"
						placeholder="请输入内容"
					></el-input
				></el-col>
				<el-col :span="3">
					<el-button type="primary" class="btn_search"
						>主要按钮</el-button
					></el-col
				>
			</el-row>
			<!-- 表格模块 -->
			<template>
				<el-table
					ref="multipleTable"
					:data="tableData"
					tooltip-effect="dark"
					style="width: 100%"
					@selection-change="handleSelectionChange"
				>
					<!-- 展开内容 -->
					<el-table-column type="expand">
						<template slot-scope="props">
							<el-form
								label-position="left"
								inline
								class="demo-table-expand"
							>
								<el-form-item
									><span>{{ props.row.yonghu }}</span>
								</el-form-item>
								<el-form-item
									><span>{{ props.row.yonghu }}</span>
								</el-form-item>
								<el-form-item
									><span>{{ props.row.yonghu }}</span>
								</el-form-item>
								<el-form-item
									><span>{{ props.row.yonghu }}</span>
								</el-form-item>
								<el-form-item
									><span>{{ props.row.yonghu }}</span>
								</el-form-item>
								<el-form-item
									><span>{{ props.row.yonghu }}</span>
								</el-form-item>
								<el-form-item
									><span>{{ props.row.yonghu }}</span>
								</el-form-item>
								<el-form-item
									><span>{{ props.row.yonghu }}</span>
								</el-form-item>
								<el-form-item
									><span>{{ props.row.yonghu }}</span>
								</el-form-item>
							</el-form>
						</template>
					</el-table-column>

					<!-- 展开内容结束 -->
					<el-table-column width="55"> </el-table-column>
					<el-table-column label="序号" prop="xuhao" width="120">
					</el-table-column>
					<el-table-column label="菜单名称" width="120">
					</el-table-column>
					<el-table-column prop="yonghu" label="菜单级别" width="120">
					</el-table-column>
					<el-table-column prop="juese" label="创建时间" width="120">
					</el-table-column>

					<el-table-column
						prop="zhuangtai"
						label="菜单类型"
						width="120"
					>
					</el-table-column>
					<el-table-column prop="yonghu" label="菜单介绍" width="120">
					</el-table-column>
					<el-table-column prop="yonghu" label="图标" width="120">
					</el-table-column>
					<el-table-column prop="yonghu" label="路由" width="120">
					</el-table-column>
					<el-table-column prop="yonghu" label="是否显示" width="120">
					</el-table-column>
					<el-table-column prop="yonghu" label="排序" width="120">
					</el-table-column>
				</el-table>
				<div style="margin-top: 20px"></div>
			</template>
			<!-- 分页模块 -->
			<div class="block">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage4"
					:page-sizes="[100, 200, 300, 400]"
					:page-size="100"
					layout="total, prev, pager, next, jumper"
					:total="400"
				>
				</el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// 搜索框数据
			input: '',
			// 分页数据
			currentPage1: 5,
			currentPage2: 5,
			currentPage3: 5,
			currentPage4: 4,
			tableData: [
				{
					xuhao: 1,
					touxiang: 'xxx',
					yonghu: 'zs',
					juese: '超管',
					sex: '男',
					cishu: '555',
					zhuangtai: '正常',
				},
			],
		}
	},
	methods: {
		handleSelectionChange(val) {
			this.multipleSelection = val
		},
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`)
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`)
		},
	},
}
</script>

<style lang="less" scoped>
.el-form-item {
	span {
		display: inline-block;
		width: 110px;
		height: 62px;
		line-height: 62px;
		text-align: right;
	}
}
/deep/.el-table__expanded-cell {
	padding: 0;
	margin: 20px 50px;
	padding-left: 139px;
	border-bottom: 1px solid #ccc;
}
</style>
